<template>
  <div class="order-detail-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <button class="back-btn" @click="goBack">
        <span class="back-icon">←</span>
        返回
      </button>
      <h1 class="page-title">订单详情</h1>
    </div>

    <!-- 登录提示 -->
    <div v-if="!isLoggedIn" class="login-prompt">
      <div class="login-prompt-icon">📋</div>
      <h3>请先登录</h3>
      <p>登录后即可查看订单详情</p>
      <div class="login-prompt-actions">
        <button class="btn-primary" @click="goToLogin">立即登录</button>
        <button class="btn-cancel" @click="goToRegister">注册账户</button>
      </div>
    </div>

    <!-- 登录后的内容 -->
    <div v-if="isLoggedIn">
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-container">
        <div class="loading-spinner"></div>
        <p>正在加载订单详情...</p>
      </div>

      <!-- 错误状态 -->
      <div v-else-if="error" class="error-container">
        <div class="error-icon">❌</div>
        <p class="error-message">{{ error }}</p>
        <button class="retry-btn" @click="initOrderInfo">重试</button>
      </div>

      <!-- 订单内容 -->
      <div v-else>

    <!-- 订单状态卡片 -->
    <div class="order-status-card">
      <div class="status-icon">
        <span class="icon">📋</span>
      </div>
      <div class="status-info">
        <h2 class="status-title">订单已创建</h2>
        <p class="status-desc">请在规定时间内完成支付</p>
      </div>
      <div class="countdown-section">
        <div class="countdown-label">支付剩余时间</div>
        <div class="countdown-timer" :class="{ 'urgent': countdownTime < 300 }">
          {{ formatTime(countdownTime) }}
        </div>
      </div>
    </div>

    <!-- 订单基本信息 -->
    <div class="order-info-card">
      <div class="card-header">
        <h3>订单信息</h3>
        <div class="order-meta">
          <span class="order-number">订单号：{{ orderInfo.orderId || 'N/A' }}</span>
          <span class="order-time">下单时间：{{ orderInfo.createTime || 'N/A' }}</span>
        </div>
      </div>
      
      <div class="order-content">
        <!-- 收货信息 -->
        <div class="delivery-section">
          <div class="section-title">
            <span class="icon">📍</span>
            收货信息
          </div>
          <div class="delivery-info">
            <div class="address-info">
              <div class="customer-name">收货人：{{ orderInfo.customerName || '用户' }}</div>
              <div class="delivery-address">收货地址：{{ orderInfo.deliveryAddress || '暂无地址' }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 多商家商品信息 -->
    <div v-for="(seller, sellerIndex) in orderInfo.orderCustomerBySellers" :key="seller.sellerId" class="seller-section">
      <div class="seller-header">
        <div class="seller-info">
          <span class="seller-icon">🏪</span>
          <span class="seller-name">{{ seller.sellerName }}</span>
        </div>
        <div class="seller-total">
          <span class="seller-amount">小计：￥{{ seller.totalPrice.toFixed(2) }}</span>
        </div>
      </div>
      
      <div class="seller-products">
        <div v-for="(product, productIndex) in seller.orderItemVOList" :key="product.id" class="product-item">
          <div class="product-image">
            <img :src="product.productImage || '/placeholder.jpg'" :alt="product.productName" />
          </div>
          <div class="product-details">
            <h4 class="product-name">{{ product.productName }}</h4>
            <div class="product-specs">
              <span v-if="product.skuName" class="spec-item">规格：{{ product.skuName }}</span>
              <span class="spec-item">数量：{{ product.quantity }}件</span>
            </div>
            <div class="product-price">
              <span class="unit-price">单价：￥{{ product.price.toFixed(2) }}</span>
              <span class="total-price">小计：￥{{ product.totalPrice.toFixed(2) }}</span>
            </div>
            <div class="product-status">
              <span class="status-badge" :class="getStatusClass(product.status)">
                {{ getStatusText(product.status) }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 订单总金额 -->
    <div class="order-summary-card">
      <div class="summary-header">
        <h3>订单金额</h3>
      </div>
      <div class="summary-content">
        <div class="amount-row">
          <span class="label">商品总金额：</span>
          <span class="value">￥{{ orderInfo.totalPrice.toFixed(2) }}</span>
        </div>
        <div class="amount-row">
          <span class="label">运费：</span>
          <span class="value">￥0.00</span>
        </div>
        <div class="amount-row total">
          <span class="label">实付金额：</span>
          <span class="value">￥{{ orderInfo.totalPrice.toFixed(2) }}</span>
        </div>
      </div>
    </div>

      <!-- 支付按钮区域 -->
      <div class="payment-section">
        <div class="payment-buttons">
          <button class="cancel-order-btn" @click="cancelOrder" :disabled="isProcessing">
            取消
          </button>
          <button class="pay-now-btn" @click="payNow" :disabled="isProcessing || countdownTime <= 0">
            <span v-if="isProcessing" class="loading-spinner"></span>
            {{ isProcessing ? '处理中' : '支付' }}
          </button>
        </div>
        <div class="payment-tips">
          <span class="tip-icon">💡</span>
          <span>支付完成后，我们将尽快为您安排发货</span>
        </div>
      </div>

    <!-- 超时提示弹窗 -->
    <div v-if="showTimeoutModal" class="timeout-modal" @click="closeTimeoutModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>支付超时</h3>
        </div>
        <div class="modal-body">
          <div class="timeout-icon">⏰</div>
          <p>很抱歉，订单支付时间已超时</p>
          <p>订单已自动取消，请重新下单</p>
        </div>
        <div class="modal-footer">
          <button class="confirm-btn" @click="goBackToProduct">重新购买</button>
        </div>
      </div>
    </div>

      </div> <!-- 订单内容结束 -->
    </div> <!-- 登录后的内容结束 -->
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { createPayment } from '@/api/payment'

const route = useRoute()
const router = useRouter()

console.log('OrderDetail.vue: route.params:', route.params)
console.log('OrderDetail.vue: route.params.orderId:', route.params.orderId)

// 订单信息
const orderInfo = ref({
  orderId: '',
  orderNumber: '',
  productName: '',
  productImage: '',
  skuName: '',
  quantity: 1,
  unitPrice: 0,
  productAmount: 0,
  shippingFee: 0,
  totalAmount: 0,
  customerName: '',
  deliveryAddress: '',
  createTime: '',
  productId: '',
  status: 0,
  sellerName: ''
})

// 加载状态
const loading = ref(true)
const error = ref('')

// 倒计时相关
const countdownTime = ref(0) // 初始值设为0
const countdownTimer = ref(null)
const showTimeoutModal = ref(false)

// 处理状态
const isProcessing = ref(false)

// 登录状态检查
const isLoggedIn = computed(() => {
  const userToken = localStorage.getItem('userToken')
  const userRoles = JSON.parse(localStorage.getItem('userRoles') || '[]')
  return !!(userToken && userRoles.length > 0)
})

// 格式化时间显示
const formatTime = (seconds) => {
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = seconds % 60
  return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`
}

// 计算剩余时间
const calculateRemainingTime = () => {
  try {
    // 1. 处理订单创建时间（转成毫秒时间戳）
    const createTime = new Date(orderInfo.value.createTime)
    if (isNaN(createTime.getTime())) { // 校验时间格式是否合法
      throw new Error('订单创建时间格式错误')
    }

    // 2. 计算截止时间（创建时间 + 20分钟 = 1200000毫秒）
    const deadlineTime = createTime.getTime() + 20 * 60 * 1000

    // 3. 计算剩余时间（截止时间 - 当前时间，转成秒）
    const currentTime = Date.now() // 当前时间（毫秒）
    let remainingSeconds = Math.floor((deadlineTime - currentTime) / 1000)

    // 4. 边界处理：剩余时间不能为负（负时间即表示超时）
    countdownTime.value = remainingSeconds > 0 ? remainingSeconds : 0

    // 5. 若已超时，直接显示超时弹窗
    if (countdownTime.value === 0) {
      stopCountdown()
      showTimeoutModal.value = true
    }
  } catch (err) {
    console.error('计算剩余时间失败：', err)
    // 时间计算异常时，默认给20分钟兜底
    countdownTime.value = 20 * 60
  }
}

// 开始倒计时
const startCountdown = () => {
  if (countdownTimer.value) {
    clearInterval(countdownTimer.value)
  }
  
  // 定时器：每秒重新计算剩余时间
  countdownTimer.value = setInterval(() => {
    calculateRemainingTime()
    
    // 若剩余时间为0，停止定时器并显示超时弹窗
    if (countdownTime.value <= 0) {
      clearInterval(countdownTimer.value)
      showTimeoutModal.value = true
    }
  }, 1000)
}

// 停止倒计时
const stopCountdown = () => {
  if (countdownTimer.value) {
    clearInterval(countdownTimer.value)
    countdownTimer.value = null
  }
}

// 返回上一页
const goBack = () => {
  router.go(-1)
}

// 返回商品页面
const goBackToProduct = () => {
  if (orderInfo.value.productId) {
    router.push(`/product/${orderInfo.value.productId}`)
  } else {
    router.push('/')
  }
}

// 关闭超时弹窗
const closeTimeoutModal = () => {
  showTimeoutModal.value = false
}

// 取消订单
const cancelOrder = () => {
  goBack()
}

// 立即支付
const payNow = async () => {
  if (isProcessing.value || countdownTime.value <= 0) return
  
  try {
    isProcessing.value = true
    
    // 构造支付请求参数
    const paymentData = {
      productName: orderInfo.value.productName,
      orderId: orderInfo.value.orderId,
      totalAmount: parseFloat(orderInfo.value.totalAmount)
    }
    
    console.log('发起支付:', paymentData)
    
    // 调用支付API
    const response = await createPayment(paymentData)
    
    console.log('支付响应:', response)
    
    // 处理支付响应
    if (response && typeof response === 'string') {
      // 后端返回的是支付宝表单HTML字符串
      if (response.includes('<form') && response.includes('alipay')) {
        console.log('收到支付宝表单，准备重定向到支付页面')
        
        // 创建一个临时的div来承载表单
        const tempDiv = document.createElement('div')
        tempDiv.innerHTML = response
        
        // 将表单添加到页面中（隐藏）
        tempDiv.style.display = 'none'
        document.body.appendChild(tempDiv)
        
        // 查找表单并自动提交
        const form = tempDiv.querySelector('form')
        if (form) {
          // 自动提交表单，重定向到支付宝
          form.submit()
          
          // 停止倒计时
          stopCountdown()
          
          console.log('表单已提交，正在跳转到支付宝...')
        } else {
          throw new Error('未找到支付表单')
        }
        
        // 清理临时元素
        setTimeout(() => {
          document.body.removeChild(tempDiv)
        }, 1000)
        
      } else if (response.startsWith('http')) {
        // 如果返回的是支付URL，则跳转到支付页面
        window.open(response, '_blank')
        alert('请在新窗口中完成支付，支付完成后页面将自动更新')
        stopCountdown()
      } else {
        console.log('支付响应:', response)
        alert('支付请求已发起，请按照提示完成支付')
      }
    } else {
      throw new Error('支付响应异常')
    }
    
  } catch (error) {
    console.error('支付失败:', error)
    alert('支付失败，请稍后重试: ' + error.message)
  } finally {
    isProcessing.value = false
  }
}

// 获取订单详情
const fetchOrderDetail = async (orderId) => {
  try {
    loading.value = true
    error.value = ''
    
    const token = localStorage.getItem('userToken')
    const headers = {
      'Content-Type': 'application/json'
    }
    
    if (token) {
      headers['Authorization'] = `Bearer ${token}`
    }
    
    const response = await fetch(`/api/orders/queryOrderMessage?orderId=${orderId}`, {
      method: 'GET',
      headers
    })
    
    if (response.ok) {
      const data = await response.json()
      
      // 处理多商家订单数据
      if (data) {
        // 获取第一个商品的地址作为收货地址
        let deliveryAddress = '暂无地址'
        let productName = '订单商品'
        
        if (data.orderCustomerBySellers && data.orderCustomerBySellers.length > 0) {
          const firstSeller = data.orderCustomerBySellers[0]
          if (firstSeller.orderItemVOList && firstSeller.orderItemVOList.length > 0) {
            const firstItem = firstSeller.orderItemVOList[0]
            deliveryAddress = firstItem.address || '暂无地址'
            productName = firstItem.productName || data.orderName || '订单商品'
          }
        }
        
        orderInfo.value = {
          orderId: data.orderId,
          customerName: data.customerName || '用户',
          totalPrice: data.totalPrice || 0,
          totalAmount: data.totalPrice || 0, // 添加totalAmount字段
          productName: productName, // 添加productName字段
          createTime: data.createTime || '',
          payTime: data.payTime,
          status: data.status,
          deliveryTime: data.deliveryTime,
          finishTime: data.finishTime,
          orderName: data.orderName || '',
          deliveryAddress: deliveryAddress,
          orderCustomerBySellers: data.orderCustomerBySellers || []
        }
      }
    } else {
      const errorData = await response.json()
      error.value = errorData.message || '获取订单详情失败'
      console.error('获取订单详情失败:', errorData)
    }
  } catch (err) {
    console.error('获取订单详情异常:', err)
    error.value = '网络错误，请稍后重试'
  } finally {
    loading.value = false
  }
}

// 初始化订单信息
const initOrderInfo = async () => {
  const orderId = route.params.orderId
  
  if (orderId) {
    await fetchOrderDetail(orderId)
    // 订单详情获取成功后，计算初始剩余时间
    if (!error.value && orderInfo.value.createTime) {
      calculateRemainingTime()
      startCountdown()
    }
  } else {
    error.value = '订单ID不存在'
    loading.value = false
  }
}

// 获取订单状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: '待支付',
    1: '已支付',
    2: '已发货',
    3: '已完成',
    4: '已取消'
  }
  return statusMap[status] || '未知状态'
}

// 获取订单状态样式类
const getStatusClass = (status) => {
  const classMap = {
    0: 'status-pending',
    1: 'status-paid',
    2: 'status-shipped',
    3: 'status-completed',
    4: 'status-cancelled'
  }
  return classMap[status] || 'status-unknown'
}

onMounted(async () => {
  if (isLoggedIn.value) {
    await initOrderInfo()
  }
})

onBeforeUnmount(() => {
  stopCountdown()
})

// 导航方法
const goToLogin = () => {
  router.push('/customer-login')
}

const goToRegister = () => {
  router.push('/customer-register')
}
</script>

<style scoped>
/* 样式部分保持不变 */
.order-detail-container {
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
  padding-top: 70px;
  padding-bottom: 50px;
  overflow-y: scroll;
  box-sizing: border-box;
}

/* 页面头部 */
.page-header {
  background: white;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.back-btn {
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #666;
  font-size: 16px;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.back-btn:hover {
  background-color: #f0f0f0;
}

.back-icon {
  font-size: 18px;
}

.page-title {
  flex: 1;
  text-align: center;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

/* 加载状态 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.loading-container .loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f0f0f0;
  border-top: 4px solid #ff6b35;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

.loading-container p {
  margin: 0;
  color: #666;
  font-size: 16px;
}

/* 错误状态 */
.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.error-icon {
  font-size: 48px;
  margin-bottom: 20px;
}

.error-message {
  margin: 0 0 20px 0;
  color: #666;
  font-size: 16px;
  line-height: 1.5;
}

.retry-btn {
  background: #ff6b35;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.retry-btn:hover {
  background: #e55a2b;
}

/* 订单状态卡片 */
.order-status-card {
  background: white;
  margin: 15px 20px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 15px;
}

.status-icon .icon {
  font-size: 32px;
}

.status-info {
  flex: 1;
}

.status-title {
  margin: 0 0 5px 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.status-desc {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.countdown-section {
  text-align: center;
}

.countdown-label {
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}

.countdown-timer {
  font-size: 24px;
  font-weight: bold;
  color: #ff6b35;
  font-family: 'Courier New', monospace;
}

.countdown-timer.urgent {
  color: #ff4444;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* 订单信息卡片 */
.order-info-card {
  background: white;
  margin: 15px 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow: hidden;
}

.card-header {
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.order-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-end;
}

.order-number, .seller-name {
  font-size: 14px;
  color: #666;
}

.seller-name {
  color: #ff6b35;
  font-weight: 500;
}

.order-content {
  padding: 20px;
}

/* 商品信息 */
.product-section {
  margin-bottom: 25px;
}

.product-item {
  display: flex;
  gap: 15px;
}

.product-image {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-details {
  flex: 1;
}

.product-name {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
}

.product-specs {
  display: flex;
  gap: 15px;
  margin-bottom: 8px;
}

.spec-item {
  font-size: 14px;
  color: #666;
}

.product-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.unit-price {
  font-size: 14px;
  color: #666;
}

.total-price {
  font-size: 16px;
  font-weight: 600;
  color: #ff6b35;
}

/* 收货信息 */
.delivery-section {
  margin-bottom: 25px;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.section-title .icon {
  font-size: 18px;
}

.delivery-info {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
}

.customer-name, .delivery-address {
  margin-bottom: 8px;
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}

.delivery-address {
  margin-bottom: 0;
}

/* 订单金额 */
.amount-section {
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}

.amount-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
}

.amount-row.total {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0;
  font-size: 16px;
  font-weight: 600;
}

.amount-row .label {
  color: #666;
}

.amount-row .value {
  color: #333;
}

.amount-row.total .value {
  color: #ff6b35;
  font-size: 18px;
}

/* 支付按钮区域 */
.payment-section {
  background: white;
  margin: 15px 20px 20px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.payment-buttons {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
}

.cancel-order-btn, .pay-now-btn {
  flex: 1;
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

.cancel-order-btn {
  background: #f5f5f5;
  color: #666;
}

.cancel-order-btn:hover:not(:disabled) {
  background: #e0e0e0;
}

.pay-now-btn {
  background: #ff6b35;
  color: white;
}

.pay-now-btn:hover:not(:disabled) {
  background: #e55a2b;
}

.cancel-order-btn:disabled, .pay-now-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.payment-tips {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 12px;
  color: #999;
}

.tip-icon {
  font-size: 14px;
}

/* 超时弹窗 */
.timeout-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.timeout-modal .modal-content {
  background: white;
  border-radius: 12px;
  padding: 0;
  max-width: 320px;
  width: 90%;
  text-align: center;
}

.timeout-modal .modal-header {
  padding: 20px 20px 10px;
}

.timeout-modal .modal-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.timeout-modal .modal-body {
  padding: 10px 20px 20px;
}

.timeout-icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.timeout-modal .modal-body p {
  margin: 8px 0;
  color: #666;
  line-height: 1.5;
}

.timeout-modal .modal-footer {
  padding: 0 20px 20px;
}

.timeout-modal .confirm-btn {
  width: 100%;
  padding: 12px;
  background: #ff6b35;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s;
}

.timeout-modal .confirm-btn:hover {
  background: #e55a2b;
}

/* 多商家样式 */
.seller-section {
  background: white;
  border-radius: 12px;
  margin: 15px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.seller-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

.seller-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.seller-icon {
  font-size: 18px;
}

.seller-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.seller-total {
  display: flex;
  align-items: center;
}

.seller-amount {
  font-size: 16px;
  font-weight: 600;
  color: #ff6b35;
}

.seller-products {
  padding: 0;
}

.seller-products .product-item {
  display: flex;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
  gap: 15px;
}

.seller-products .product-item:last-child {
  border-bottom: none;
}

.product-status {
  margin-top: 8px;
}

.status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.status-pending {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeaa7;
}

.status-paid {
  background: #d1ecf1;
  color: #0c5460;
  border: 1px solid #bee5eb;
}

.status-shipped {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.status-completed {
  background: #d1ecf1;
  color: #0c5460;
  border: 1px solid #bee5eb;
}

.status-cancelled {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.status-unknown {
  background: #e2e3e5;
  color: #383d41;
  border: 1px solid #d6d8db;
}

/* 订单总金额卡片 */
.order-summary-card {
  background: white;
  border-radius: 12px;
  margin: 15px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.summary-header {
  padding: 15px 20px;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

.summary-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.summary-content {
  padding: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .order-detail-container {
    padding-top: 70px;
    padding-bottom: 20px;
  }
  
  .order-status-card {
    margin: 10px 15px;
    padding: 15px;
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
  
  .order-info-card {
    margin: 10px 15px;
  }
  
  .product-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .product-image {
    width: 120px;
    height: 120px;
  }
  
  .product-price {
    flex-direction: column;
    gap: 5px;
  }
  
  .payment-section {
    margin: 10px 15px 20px;
    padding: 15px;
  }
  
  .payment-buttons {
    flex-direction: column;
    gap: 8px;
  }
  
  .seller-section {
    margin: 10px 15px;
  }
  
  .seller-header {
    padding: 12px 15px;
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  
  .seller-products .product-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px;
  }
  
  .order-summary-card {
    margin: 10px 15px;
  }
  
  .summary-header {
    padding: 12px 15px;
  }
  
  .summary-content {
    padding: 15px;
  }
}

/* 登录提示样式 */
.login-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  margin: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.login-prompt-icon {
  font-size: 48px;
  margin-bottom: 20px;
}

.login-prompt h3 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 24px;
  font-weight: 600;
}

.login-prompt p {
  margin: 0 0 30px 0;
  color: #666;
  font-size: 16px;
}

.login-prompt-actions {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
}

.login-prompt-actions button {
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 120px;
}

.btn-primary {
  background: #ff6b35;
  color: white;
}

.btn-primary:hover {
  background: #e55a2b;
  transform: translateY(-2px);
}

.btn-cancel {
  background: #f5f5f5;
  color: #666;
}

.btn-cancel:hover {
  background: #e0e0e0;
  color: #333;
}
</style>